<template>
  <div class="login-container">
    <div class="form-box" :style="formStyle">
      <transition name="fade" mode="out-in">
        <div v-if="status.isLogin">
          {{ status.message }}
        </div>

        <password
          v-else-if="loginType == 'password'"
          @captcha="captchaHandler"
          @login-success="loginSuccessHandler"
          class="password-box"
        />

        <sms
          v-else-if="loginType == 'email'"
          @captcha="captchaHandler"
          @login-success="loginSuccessHandler"
          class="email-box"
        />

        <face-login
          v-else-if="loginType == 'face'"
          @captcha="captchaHandler"
          @login-success="loginSuccessHandler"
          class="face-box"
        />
      </transition>
    </div>

    <div class="con-box left">
      <h2>欢饮使用<span>jaguar</span></h2>
      <p>统一授权平台</p>
      <el-image :src="require('@/assets/image/logo.png')" />
      <p>忘记密码？试试以下登录方式</p>
      <div>
        <el-link type="primary" @click="loginType = 'email'"
          >验证码登录</el-link
        >
        &nbsp;
        <el-link type="primary" @click="loginType = 'face'">人脸认证</el-link>
      </div>
    </div>

    <div class="con-box right">
      <h2>欢饮使用<span>jaguar</span></h2>
      <p>统一授权平台</p>
      <el-image :src="require('@/assets/image/logo.png')" />
      <el-link type="primary" @click="loginType = 'password'">密码登录</el-link>
    </div>

    <el-form
      ref="implictDataForm"
      method="get"
      action="/api/jaguar-auth-server/oauth/authorize"
    >
      <div v-show="false">
        <el-input name="client_id" v-model="client_id" />
        <el-input name="response_type" v-model="response_type" />
        <el-input name="redirect_uri" v-model="redirect_uri" />
        <el-input name="state" v-model="state" />
        <el-input name="scope" v-model="scope" />
      </div>
    </el-form>

    <verify
      ref="verify"
      mode="pop"
      captchaType="blockPuzzle"
      @success="verifyCallback"
      :imgSize="{ width: '330px', height: '155px' }"
    />
  </div>
</template>
<script>
import Verify from '@/components/Verifition/Verify'
import FaceLogin from './loginType/FaceLogin'
import Password from './loginType/Password'
import Sms from './loginType/Sms'
import { logout, loginUserInfo } from '@/api/login'

export default {
  name: 'Index',
  data() {
    return {
      loginType: 'password',
      status: {
        isLogin: true,
        message: '正在请求授权...',
      },
      verifyCallback: null,
      logout: false,
      client_id: window.defaultClientId,
      response_type: window.defaultResponseType,
      redirect_uri: window.defaultRedirectUri,
      scope: null,
      state: null,
    }
  },
  computed: {
    title() {
      return window.serverName
    },
    formStyle() {
      return (
        'transform:' +
        (this.loginType == 'password' ? 'translateX(80%)' : 'translateX(0%)')
      )
    },
  },
  components: {
    Verify,
    FaceLogin,
    Password,
    Sms,
  },
  mounted() {
    if (this.initParams()) {
      if (this.logout) {
        logout()
        this.status.isLogin = false
      } else {
        this.loginUserInfo()
      }
    }
  },
  methods: {
    initParams() {
      if (this.$route.query.client_id)
        this.client_id = this.$route.query.client_id

      if (this.$route.query.response_type)
        this.response_type = this.$route.query.response_type

      if (this.$route.query.scope) this.scope = this.$route.query.scope

      if (this.$route.query.redirect_uri)
        this.redirect_uri = this.$route.query.redirect_uri

      if (this.$route.query.state) this.state = this.$route.query.state

      if (this.$route.query.logout != null)
        this.logout = this.$route.query.logout

      if (!this.client_id || !this.response_type || !this.redirect_uri) {
        this.status.message = '请求授权参数丢失'
        return false
      }

      return true
    },
    loginUserInfo() {
      loginUserInfo()
        .then(() => {
          this.loginSuccessHandler()
        })
        .catch((err) => {
          if (err.data.resultCode == 401) this.status.isLogin = false
        })
    },
    loginSuccessHandler() {
      setTimeout(() => {
        this.authorize()
      }, 500)
    },
    authorize() {
      if (this.response_type == 'code') {
        this.$router.push({
          path: '/authorize',
          query: {
            client_id: this.client_id,
            redirect_uri: this.redirect_uri,
            state: this.state,
          },
        })
      } else if (this.response_type == 'token') {
        this.$nextTick(() => {
          this.$refs.implictDataForm.$el.submit()
        })
      } else {
        this.$message.error('无效的响应类型')
      }
    },
    captchaHandler(verifyCallback) {
      this.verifyCallback = verifyCallback
      this.$refs.verify.show()
    },
  },
}
</script>
<style lang="scss">
.login-container {
  background-color: #fff;
  width: 650px;
  height: 415px;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .form-box {
    position: absolute;
    top: -10%;
    left: 5%;
    background-color: #87cefa;
    width: 320px;
    height: 500px;
    border-radius: 5px;
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: 0.5s ease-in-out;

    .password-box,
    .email-box,
    .face-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      text-align: center;

      h1 {
        margin-bottom: 20px;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: 5px;
      }

      button {
        width: 70%;
        border-radius: 8px;
        letter-spacing: 4px;
      }
    }
  }

  .con-box {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    h2 {
      color: #909399;
      font-size: 25px;
      font-weight: bold;
      letter-spacing: 3px;
      text-align: center;
      margin-bottom: 4px;

      span {
        color: #87cefa;
      }
    }

    p {
      font-size: 12px;
      letter-spacing: 2px;
      color: #909399;
      text-align: center;
      margin-bottom: 4px;
    }

    .el-image {
      width: 150px;
      opacity: 0.9;
      margin: 40px auto;
    }
  }

  .con-box.left {
    left: -2%;
  }

  .con-box.right {
    right: -2%;
  }
}
</style>
